﻿@using WB.Core.GenericSubdomains.Portable
@using WB.UI.Designer.BootstrapSupport.HtmlHelpers
@using WB.UI.Designer.Utils
@using WB.UI.Designer.Code
@model WB.Core.BoundedContexts.Designer.Views.Questionnaire.ChangeHistory.QuestionnaireChangeHistory

@{
    ViewBag.Title = QuestionnaireHistoryResources.QuestionnaireChangeHistory;
}

<div id="edit-form" style="position: static;">
    <h3 style="margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
        <a href='@($"/q/details/{Model!.Id.FormatGuid()}")' class="btn btn-default">@QuestionnaireHistoryResources.Edit</a>
        @Model.Title
    </h3>
</div>
<table id="questionnaire-table-header" class="table  table-header">
    <thead>
        <tr>
            <th>
                @QuestionnaireHistoryResources.Change
            </th>
            <th>@QuestionnaireHistoryResources.UserName</th>
            <th>@QuestionnaireHistoryResources.Timestamp</th>
            @if (!Model.ReadonlyMode)
            {

                <th>@QuestionnaireHistoryResources.Comment</th>
                <th></th>
            }
        </tr>
    </thead>
</table>
<div id="table-content-holder" style="top: 77px;">
    <div class="scroller-container">
        @if (Model == null || Model.ChangeHistory.Count == 0)
        {
            <p class="text-center" style="line-height: 10em">@QuestionnaireHistoryResources.ThisListDoesNotContainAnyRecords</p>
        }
        else
        {
            var rows = Model.ChangeHistory.ToPagedList(page: Model.PageIndex, pageSize: Model.PageSize, totalCount: Model.TotalCount);
            <table id="questionnaire-table-content" class="table table-content">
                <tbody>
                    @foreach (var listViewModel in rows)
                    {
                        <tr>
                            <td class="search-value">
                                @Html.FormatQuestionnaireHistoricalRecord(Url, Model.Id, listViewModel)
                            </td>
                            <td>@(listViewModel.UserName ?? QuestionnaireHistoryResources.UnknownUserName)</td>
                            <td>
                                <time time="@listViewModel.Timestamp.ToString("s")Z">@listViewModel.Timestamp.ConvertToLocalAndFormatDate()</time>
                            </td>
                            @if (!Model.ReadonlyMode)
                            {
                                <td>
                                    @listViewModel.Comment
                                </td>
                                <td>
                                    @if (listViewModel.HasRevertTo || listViewModel.CanEditComment)
                                    {
                                        <div class="btn-group pull-right">
                                            <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
                                                @QuestionnaireController.Action<span class="caret"></span>
                                            </a>
                                            <ul class="dropdown-menu">
                                                @if (listViewModel.HasRevertTo)
                                                {
                                                    <li>
                                                        <a href='@($"/q/details/{Model.Id:N}${listViewModel.Sequence}")'>View</a>
                                                    </li>
                                                    <li class="divider"></li>
                                                    <li><a href="javascript:void(0);" onclick="confirmRevert('@listViewModel.Timestamp.ToString("s")', '@listViewModel.Id')">@QuestionnaireHistoryResources.RevertToThisVersion</a></li>
                                                    <li>@Html.ActionLink(QuestionnaireHistoryResources.ExtractAtRevision, "Clone", "Questionnaire", new { id = $"{Model.Id:N}${listViewModel.Sequence}" })</li>

                                                    @if (listViewModel.CanEditComment)
                                                    {
                                                        <li class="divider"></li>
                                                    }
                                                }
                                                
                                                @if (listViewModel.CanEditComment)
                                                {
                                                    <li><a href="javascript:void(0);" onclick="showComment('@listViewModel.Id', '')">@QuestionnaireHistoryResources.LeaveComment</a></li>
                                                }
                                            </ul>
                                        </div>
                                    }
                                </td>
                            }
                        </tr>
                    }
                </tbody>
            </table>

            @Html.Pager(rows.PageIndex + 1, rows.TotalPages,
                x => Url.Action(ViewContext.CurrentAction(), ViewContext.CurrentController(), new
            {
                p = x,
                id = Model.Id
            }), 2)
        }
    </div>
</div>

@section Modal {
    <!-- Comment Modal -->
    <div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">@QuestionnaireHistoryResources.LeaveComment</h4>
                </div>
                <div class="modal-body">
                    <textarea id="comment" rows="5" maxlength="500" class="form-control"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">@QuestionnaireHistoryResources.Cancel</button>
                    <button type="button" class="btn btn-primary" id="saveCommentBtn">@QuestionnaireHistoryResources.Save</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Revert modal -->
    <div class="modal fade" id="revertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">@QuestionnaireHistoryResources.Confirm</h4>
                </div>
                <div class="modal-body">
                    @Html.Raw(string.Format(QuestionnaireHistoryResources.ResetQuestionnaireToThis, "<span id=\"version\">?</span>"))
                </div>
                <div class="modal-footer">
                    @using (Html.BeginForm("Revert", "Questionnaire", FormMethod.Post))
                    {
                        <button type="button" class="btn btn-default" data-dismiss="modal">@QuestionnaireHistoryResources.Cancel</button>
                        @Html.Hidden("id", @Model?.Id)
                        @Html.Hidden("commandId", null, new { id = "commandId" })
                        <button type="submit" class="btn btn-primary" id="confirmRevertBtn">@QuestionnaireHistoryResources.Revert</button>
                    }
                </div>
            </div>
        </div>
    </div>
}
<script type="text/javascript">
    $(function() {
        window.confirmRevert = function(date, revertId) {
            $('#version').text(date);
            $('#commandId').val(revertId);
            $('#revertModal').modal('show');
        };

        var comments = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model?.ChangeHistory.ToDictionary(c=> c.Id, c=> c.Comment)));

        window.showComment = function (historyItemId) {
            $("#comment").val(comments[historyItemId])
            $('#saveCommentBtn').click(function () {                    
                $.post({url:"@Url.Action("SaveComment", "Questionnaire")",
                        data:{id: '@Model?.Id', historyItemId: historyItemId, comment: $('#comment').val()},
                        headers: {'X-CSRF-TOKEN': getCsrfCookie()} })
                .done(function (data) { if(data) location.reload();});
            });
            $('#commentModal').modal('show');
        };
    });
</script>
